{% extends "layout.html" %}

{% block content %}
<div class="container-fluid">
    <ol class="breadcrumb">
        <li><a href="/">后台管理</a></li>
        <li><a href="javascript:void(0);" onclick="$('#menu-stats').trigger('click');">运营统计</a></li>
        <li class="active">订单统计</li>
    </ol>
{#    <h2 class="sub-header">User Stats!</h2>#}
    <p class="btn-group pull-right" role="group" aria-label="...">
    {% if not request.query_string or request.query_string == 'time_based=hour' %}
        <a type="button" class="btn btn-default active">时</a>
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='date') }}">日</a>
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='month') }}">月</a>
    {% elif request.query_string == 'time_based=date' %}
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='hour') }}">时</a>
        <a type="button" class="btn btn-default active">日</a>
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='month') }}">月</a>
    {% elif request.query_string == 'time_based=month' %}
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='hour') }}">时</a>
        <a type="button" class="btn btn-default" href="{{ url_for('stats.order', time_based='date') }}">日</a>
        <a type="button" class="btn btn-default active">月</a>
    {% endif %}
    </p>

    <div class="row">
        <div class="col-lg-12 col-md-12">
            <section id="chart_line_graphs">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong class="panel-title">
                            <span class="glyphicon glyphicon-signal"></span> 订单统计
                            <span class="glyphicon glyphicon-refresh pull-right"></span>
                        </strong>
                    </div>
                    <div class="panel-body">
                        <canvas id="chart_line_canvas"></canvas>
                    </div>
                    <div class="panel-footer text-center text-muted">
                        <i id="current_time">{{ moment().format('dddd, YYYY-MM-DD, h:mm:ss a') }}</i>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

{% endblock %}


{% block extra_js %}
<script>
    $(function () {
        // 配置图表选项
        var options = {
            responsive: true,
            tooltips: {
                intersect: false,
                mode: 'index',
                bodySpacing: 4
            },
            legend: {
                position: 'bottom'
            },
            title: {
                display: true,
                text: '订单统计 - 订单金额'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        };

        // 获取Line图标数据
        $.getJSON('{{ url_for('order.ajax_stats') }}',
            {
                time_based: '{{ time_based }}'
            },
            function (data) {
                /* 创建Line图表 */
                var ctx = $("#chart_line_canvas").get(0).getContext("2d");
                var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: data,
                    options: options
                });
                // console.log(myLineChart);
            }
        );
    });

    // 当前时间同步刷新
    var update_time;
    (update_time = function () {
        $('#current_time').html(moment().format('dddd, YYYY-MM-DD, h:mm:ss a'));
    })();
    setInterval(update_time, 1000);
</script>
{% endblock %}
